import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/theme-switch',
    name: 'ThemeSwitch',
    component: () => import(/* webpackChunkName: "theme-switch" */ '../views/ThemeSwitch.vue')
  },
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/layout',
    name: 'Layout',
    component: () => import(/* webpackChunkName: "layout" */ '../layout/index.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/button',
    name: 'button',
    component: () => import(/* webpackChunkName: "button" */ '../views/basic/button.vue')
  },
  {
    path: '/checkbox',
    name: 'checkbox',
    component: () => import(/* webpackChunkName: "checkbox" */ '../views/basic/checkbox.vue')
  },
  {
    path: '/textOverflow',
    name: 'textOverflow',
    component: () => import(/* webpackChunkName: "textOverflow" */ '../views/textOver')
  },
  {
    path: '/attr',
    name: 'attr',
    component: () => import(/* webpackChunkName: "attr" */ '../views/attr')
  },
  {
    path: '/suspense',
    name: 'suspense',
    component: () => import(/* webpackChunkName: "suspense" */ '../views/suspense')
  },
  {
    path: '/deploy',
    name: 'deploy',
    component: () => import(/* webpackChunkName: "deploy" */ '../views/deploy')
  },
  {
    path: '/dialog',
    name: 'dialog',
    component: () => import(/* webpackChunkName: "deploy" */ '../views/dialog')
  },
  {
    path: '/loadingBtn',
    name: 'loadingBtn',
    component: () => import(/* webpackChunkName: "loadingBtn" */ '../views/loadingBtn')
  },
  {
    path: '/firstLevel',
    name: 'firstLevel',
    component: () => import(/* webpackChunkName: "firstLevel" */'../views/FirstLevel.vue'),
  },
  {
    path: '/secondLevel',
    name: 'secondLevel',
    component: () => import(/* webpackChunkName: "secondLevel" */'../views/SecondLevel.vue'),
  },
  {
    path: '/sse',
    name: 'sse',
    component: () => import(/* webpackChunkName: "sse" */'../views/sse.vue'),
  },
  {
    path: '/recorder',
    name: 'recorder',
    component: () => import(/* webpackChunkName: "recorder" */'../views/recorder/index.vue'),
  },
  {
    path: '/:pathMatch(.*)*/',
    component: () => import(/* webpackChunkName: 'Notfound' */ '../views/Notfound.vue')
  },
]

const scrollBehavior = (to, from, savedPosition) => {
  // savedPosition 点击浏览器的前进后退按钮的时候触发的行为
  if(savedPosition) return savedPosition
  return { left: 0, top: 0 }
}

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior
})

export default router
